<template>
	<div class="sw_system_container">
		<div class="sw_query_form" v-if="$isHasAuth(topButton)">
			<div class="button" v-hasPermi="'5af202f042ca418fa7aa38d1933b569a'">
				<el-button size="small" type="primary" icon="el-icon-refresh" @click="handleOpenDialog()">一键备份</el-button>
			</div>
			<el-form size="small" inline v-hasPermi="'2f2c02fee2f8447283795c85a6605e9b'">
				<el-form-item><el-input v-model="queryData.name" clearable placeholder="请输入备份名称"></el-input></el-form-item>
				<el-form-item><el-input v-model="queryData.createName" clearable placeholder="请输入创建人"></el-input></el-form-item>
				<!-- <el-form-item><el-input v-model="queryData.name" clearable placeholder="请输入IP地址"></el-input></el-form-item> -->
				<el-form-item><el-button type="primary" @click="getBackupListData">查询</el-button></el-form-item>
			</el-form>
		</div>
		<div class="sw_table_container">
			<el-table size="medium" :data="tableData" stripe height="100%">
				<el-table-column type="index" label="序号" align="center"></el-table-column>
				<el-table-column prop="name" label="备份名称" min-width="160"></el-table-column>
				<el-table-column prop="ipAddr" label="IP地址" min-width="100"></el-table-column>
				<el-table-column prop="content" label="备份描述" min-width="200"></el-table-column>
				<el-table-column prop="createName" label="创建人" width="120"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
				<el-table-column label="操作" width="160" v-if="$isHasAuth(tableButton)">
					<template slot-scope="{ row }">
						<el-button size="medium" type="text" @click="handleLookRecoverData(row)" v-hasPermi="'09a930dcda8f448fb95b18e25bd52ee8'">恢复记录</el-button>
						<el-button size="medium" type="text" @click="handleRecoverData(row)" v-hasPermi="'614772b4524c447f82051ee7aee2a0ce'">恢复</el-button>
						<el-button size="medium" type="text" @click="handleOpenDialog(row)" v-hasPermi="'cb26242d7f9743a1a18269ff2df1b388'">修改</el-button>
						<!-- <el-button size="medium" type="text" @click="handleDownloadData(row.id)">下载</el-button> -->
					</template>
				</el-table-column>
			</el-table>
		</div>
		<template v-if="dataCount > 0">
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="getBackupListData"></sw-pagination>
		</template>
		<backup-form v-model="backupDialog" :data="backupData" @refresh="getBackupListData"></backup-form>
		<recover-drawer v-model="recoverDrawer" :backup-id="backupId"></recover-drawer>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import backupForm from './form';
import recoverDrawer from './drawer';
import { getBackupList, recoverDatabase, downDatabase } from '@/api/system/tbSysBackup';
export default {
	components: { backupForm, recoverDrawer },
	data() {
		return {
			queryData: {
				page: 1,
				limit: 15
			},
			dataCount: 0,
			tableData: [],
			backupId: null,
			backupData: {},
			recoverDrawer: false,
			backupDialog: false
		};
	},
	computed: {
		topButton() {
			return ['5af202f042ca418fa7aa38d1933b569a', '2f2c02fee2f8447283795c85a6605e9b'];
		},
		tableButton() {
			return ['09a930dcda8f448fb95b18e25bd52ee8', '614772b4524c447f82051ee7aee2a0ce', 'cb26242d7f9743a1a18269ff2df1b388'];
		}
	},
	mounted() {
		this.getBackupListData();
	},
	methods: {
		//获取备份列表
		async getBackupListData() {
			let params = { ...this.queryData };
			let result = await getBackupList(params).then((res) => res.data);
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.tableData = !result.data ? [] : result.data;
			}
		},

		//打开备份表单
		handleOpenDialog(data) {
			this.backupData = { ...data };
			this.backupDialog = true;
		},

		//恢复备份数据
		handleRecoverData(data) {
			let that = this;
			that.$confirm(`确认恢复<font color="#f00">【${data.name}】</font>？恢复前请备份最新数据，以免丢失！`, '恢复提示', {
				type: 'warning',
				cancelButtonText: '去备份',
				confirmButtonText: '恢复备份',
				dangerouslyUseHTMLString: true,
				distinguishCancelAndClose: true,
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						that.recoverBackupRequest(data.id);
						done();
					} else if (action === 'cancel') {
						that.backupData = {};
						that.backupDialog = true;
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		//查看恢复列表
		handleLookRecoverData(data) {
			this.backupId = data.id;
			this.recoverDrawer = true;
		},

		//恢复备份请求
		async recoverBackupRequest(id) {
			let fullLoading = this.$loading({ lock: true, text: '恢复备份数据进行中...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
			let result = await recoverDatabase(id).then((res) => res.data);
			fullLoading.close();
			if (result.code === '0') {
				this.$showCustomMessage('success', '恢复备份成功');
			}
		},

		//下载备份
		async handleDownloadData(id) {
			let result = await downDatabase(id).then((res) => res.data);
		}
	}
};
</script>

<style scoped></style>
